<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fliter滤镜</title>
    <style>
        /* blur + opacity + drop-shadow 
        */
        .blur {
            /* 高斯模糊 */
            -webkit-filter: blur(4px);
            filter: blur(4px);
        }

        .brightness {
            -webkit-filter: brightness(0.30);
            filter: brightness(0.30);
        }

        .contrast {
            -webkit-filter: contrast(180%);
            filter: contrast(180%);
        }

        .grayscale {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }

        .huerotate {
            -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
        }

        .invert {
            -webkit-filter: invert(100%);
            filter: invert(100%);
        }

        .opacity {
            /* 透明度 */
            -webkit-filter: opacity(50%);
            filter: opacity(50%);
        }

        .saturate {
            -webkit-filter: saturate(7);
            filter: saturate(7);
        }

        .sepia {
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
        }

        .shadow {
            /* 阴影  */
            -webkit-filter: drop-shadow(8px 8px 10px green);
            filter: drop-shadow(8px 8px 10px green);
        }
    </style>
</head>

<body>
    <div class="blur"><img src="images/1.jpg" alt=""></div>

    <div class="brightness"><img src="images/1.jpg" alt=""></div>

    <div class="contrast"><img src="images/1.jpg" alt=""></div>

    <div class="grayscale"><img src="images/1.jpg" alt=""></div>

    <div class="huerotate"><img src="images/1.jpg" alt=""></div>

    <div class="invert"><img src="images/1.jpg" alt=""></div>

    <div class="opacity"><img src="images/1.jpg" alt=""></div>

    <div class="saturate"><img src="images/1.jpg" alt=""></div>

    <div class="sepia"><img src="images/1.jpg" alt=""></div>

    <div class="shadow"><img src="images/1.jpg" alt=""></div>
</body>

</html>